<template>
  <el-popover popper-class="approval-popover" placement="bottom-start" title="添加流程节点" width="350" trigger="click">
    <div class="node-select">
      <div @click="addApprovalNode" class="node-select-list">
        <i class="el-icon-s-check"></i>
        <span>审批人</span>
      </div>
      <div @click="addCcNode" class="node-select-list">
        <i class="el-icon-s-promotion"></i>
        <span>抄送人</span>
      </div>
      <div @click="addConditionsNode" class="node-select-list">
        <i class="el-icon-share"></i>
        <span>条件分支</span>
      </div>
      <div @click="addConcurrentsNode" class="node-select-list">
        <i class="el-icon-s-operation"></i>
        <span>并行分支</span>
      </div>
      <!--      <div @click="addDelayNode">-->
      <!--        <i class="el-icon-time" style="color:#f25643;"></i>-->
      <!--        <span>延迟等待</span>-->
      <!--      </div>-->
      <!--      <div @click="addTriggerNode">-->
      <!--        <i class="el-icon-set-up" style="color:#15BC83;"></i>-->
      <!--        <span>触发器</span>-->
      <!--      </div>-->
    </div>
<!--    <el-button icon="el-icon-plus" slot="reference" type="primary" size="small" circle></el-button>-->
    <span class="el-icon-plus add-line-box-btn" slot="reference">

    </span>
  </el-popover>
</template>

<script>
export default {
  name: "InsertButton",
  components: {},
  data() {
    return {}
  },
  computed: {
    selectedNode() {
      this.$store.state.selectedNode
    }
  },
  methods: {
    addApprovalNode() {
      // 审批人
      this.$emit('insertNode', "APPROVAL")
    },
    addCcNode() {
      // 抄送人
      this.$emit('insertNode', "CC")
    },
    // addDelayNode() {
    //   // 延迟等待
    //   this.$emit('insertNode', "DELAY")
    // },
    addConditionsNode() {
      // 条件分支
      this.$emit('insertNode', "CONDITIONS")
    },
    addConcurrentsNode() {
      // 并行分支
      this.$emit('insertNode', "CONCURRENTS")
    },
    // addTriggerNode() {
    //   // 触发器
    //   this.$emit('insertNode', "TRIGGER")
    // }
  }
}
</script>

<style lang="less" scoped>
.node-select {
  div {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 10px;
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid #F8F9F9;
    background-color: #F8F9F9;
    border-radius: 10px;
    width: 157px;
    position: relative;

    span {
      position: absolute;
      left: 65px;
      top: 18px;
    }

    &:hover {
      background-color: #fff;
      box-shadow: 0 0 8px 2px #d6d6d6;
    }

    i {
      color: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 24px;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .node-select-list {
    &:nth-child(2n) {
      margin-right: 0;
    }

    &:nth-child(1) i {
      background: #eea55d;
    }

    &:nth-child(2) i {
      background: #609df1;
    }

    &:nth-child(3) i {
      background: #72cb9f;
    }

    &:nth-child(4) i {
      background: #5bb2c1;
    }
  }
}
.add-line-box-btn{
  width: 30px;
  height: 30px;
  background: #3296fa;
  border-radius: 50%;
  position: relative;
  border: none;
  line-height: 30px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.add-line-box-btn:hover {
  transform: scale(1.3);
  box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
}
</style>
